import 'package:flutter/material.dart';

class MyApp12 extends StatelessWidget {
  MyApp12({super.key});

  final Map goods = {
    "createTime": "2024-08-15 21:49:48",
    "orderState": "待发货",
    "image":
        "https://yanxuan-item.nosdn.127.net/a09de222ed32efa8ffe359b1d5780574.jpg",
    "name": "茶水分离杯耐热隔热玻璃杯 茶水分离杯耐热隔热玻璃杯",
    "totalNum": 2,
    "curPrice": 119.5,
    "totalMoney": 119.5,
    "attrsText": "规格:白色240ml"
  };

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        // 导航条
        appBar: AppBar(
          title: const Text('案例-商品订单信息',
              style: TextStyle(color: Colors.white, fontSize: 20)),
          backgroundColor: Colors.pink,
          centerTitle: true,
        ),
        // 主体区域
        body: Container(
            padding: const EdgeInsets.all(10),
            width: MediaQuery.of(context).size.width,
            height: 250,
            color: Colors.white,
            child: Column(
              children: [
                // 1. 上部分
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text('${goods['createTime']}'),
                    Text(
                      '${goods['orderState']}',
                      style: const TextStyle(color: Colors.orange),
                    ),
                  ],
                ),
                // 2. 中间部分
                Padding(
                    padding: const EdgeInsets.only(top: 10, bottom: 10),
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        // 2.1 图片
                        Image.network(
                          goods['image'],
                          width: 120,
                          height: 120,
                        ),
                        // 2.2 右侧
                        Expanded(
                            flex: 1,
                            child: Padding(
                              padding: const EdgeInsets.only(left: 10),
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  // 2.2.1 第一行
                                  Row(
                                    children: [
                                      Expanded(child: Text('${goods['name']}')),
                                      const SizedBox(width: 10),
                                      Text('x${goods['totalNum']}'),
                                    ],
                                  ),
                                  const SizedBox(height: 10),
                                  // 2.2.2 第二行
                                  Container(
                                    padding: const EdgeInsets.all(5),
                                    decoration: BoxDecoration(
                                      borderRadius: BorderRadius.circular(5),
                                      color: const Color.fromARGB(
                                          255, 241, 239, 239),
                                    ),
                                    child: Text(
                                      '${goods['attrsText']}',
                                      style:
                                          const TextStyle(color: Colors.grey),
                                    ),
                                  ),
                                  const SizedBox(height: 10),
                                  // 2.2.3 第三行
                                  Text(
                                    '￥${goods['curPrice']}',
                                    style: const TextStyle(color: Colors.red),
                                  ),
                                ],
                              ),
                            ))
                      ],
                    )),
                // 3. 下部分
                Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: [
                    Text('合计：￥${goods['totalNum'] * goods['curPrice']}'),
                  ],
                ),
                const SizedBox(height: 10),
                // 4. 按钮
                Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: [
                    ElevatedButton(
                      onPressed: () {},
                      child: const Text('取消订单'),
                    ),
                    const SizedBox(width: 10),
                    ElevatedButton(
                      onPressed: () {},
                      child: const Text('去支付'),
                    )
                  ]
                )
              ],
            )));
  }
}
